<template>
  <div class="all">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="redpackage">
      <span @click="clickshop" :class="className1">
        红包
      </span>
      <span @click="clickappr" :class="className2">
        商家代金券
      </span>
    </div>
    <div class="left" v-if="flag" @click="bugShows = false">
      <div class="top">
        <div class="d1">有<span> 3 </span>个红包即将到期</div>
        <div class="right">
          <i class="iconfont icon-wenhao"></i>
          <span class="introduce">红包说明</span>
        </div>
      </div>
      <div class="content">
        <div class="list" v-for="(item,index) in red" :key="index">
          <div class="price">
            <span class="s1">￥ <span class="s2">{{item.amount}}</span></span>
            <div class="s3">满 <span>{{item.sum_condition}}</span> 可用</div>
          </div>
          <div class="share">
            <p class="s1">{{item.name}}</p>
            <p>{{item.end_date}} 到期</p>
            <p>{{item.description_map.phone}}</p>
          </div>
          <div class="surplus">{{item.description_map.validity_delta}}
          </div>
          <div class="limit" v-if="item.limit_map">{{item.limit_map.restaurant_flavor_ids}}</div>
        </div>
      </div>
      <div class="history" @click="goHistory">查看历史红包 ></div>
      <div class="foot">
        <div class="his1" @click="goConvert">兑换红包</div>
        <div class="his2">推荐有奖</div>
      </div>
    </div>
    <div class="disable" v-if="!flag" @click="showClick">
      <i class="iconfont icon-wenhao wenhao"></i>
      <span class="vonvher">商家代金券说明</span>
      <img src="../img//vencher.png" alt="" class="img1">
      <van-button type="primary" class="load">下载或升级客户端</van-button>
    </div>
  </div>
</template>

<script>
  import Nav from "@/components/Nav.vue";
  export default {
    neme: "PreferentialLeft",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '我的优惠',
        right_name: '',
        red: [],
        className1: "light",
        className2: "normal",
        flag: "ture",
        bugShows: false,
      }
    },
    components: {
      Nav
    },
    methods: {
      showClick() {
        this.bugShows = true;
      },
      goHistory() {
        this.$router.push({ name: "GoHistory" })
      },
      goConvert() {
        this.$router.push({ name: "ConvertRed" })
      },
      clickshop() {
        this.className1 = "light";
        this.className2 = "normal";
        this.flag = true;
      },
      clickappr() {
        this.className2 = "light";
        this.className1 = "normal";
        this.flag = false;
      },
    },
    created() {
      const request1 = this.axios.get("https://elm.cangdu.org/promotion/v2/users/1/hongbaos?limit=20&offset=0");
      // const request2 = this.axios.get(this.$url + "/news/get?channel=头条&start=0&num=10&appkey=" + this.$appKey);
      // 同时把请求多个url的数据, all将多个网络请求合并统一请求，之后通过spread操作将多个网络请求结果按照顺序依次输出
      this.axios.all([request1]).then(this.axios.spread((res1) => {
        this.red = res1.data;
        console.log(res1.data)
        // this.news = res2.data.result.list;
      })).catch(err => console.log(err));
    },
  }
</script>

<style lang="less" scoped>
  .all {
    margin-top: 47px;
    background-color: rgb(245, 245, 245);
  }

  .icon-wenhao {
    background-color: rgb(49, 144, 232);
    color: rgb(245, 245, 245);
    margin-right: 5px;
  }

  .introduce {
    color: rgb(49, 144, 232);
  }

  .redpackage {
    height: 40px;
    line-height: 40px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    padding-bottom: 10px;
  }

  .top {
    padding: 15px;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
  }

  .d1 span {
    color: red;
  }

  .list {
    background: #fff url() repeat-x;
    width: 92%;
    padding: 25px 0 0 0;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
  }

  .price {
    width: 22%;
    text-align: left;
    color: rgb(146, 146, 146);
    padding-bottom: 20px;
    padding-left: 10px;
  }

  .price .s1 {
    color: rgb(255, 83, 64);
  }

  .price .s2 {
    font-size: 30px;
    font-weight: 600;
  }

  .price .s3 {
    font-size: 13px;
  }

  .share {
    width: 52%;
    text-align: left;
    color: rgb(146, 146, 146);
    font-size: 12px;
    padding-bottom: 20px;
  }

  .share .s1 {
    color: rgb(53, 53, 53);
    font-size: 16px;
  }

  .surplus {
    width: 15%;
    margin-top: -20px;
    color: rgb(255, 83, 64);
    padding-bottom: 20px;
  }

  .limit {
    width: 100%;
    float: left;
    background-color: rgb(249, 249, 249);
    padding: 10px;
    font-size: 12px;
    text-align: center;
    color: rgb(146, 146, 146);
    margin-top: 10px;
  }

  .history {
    color: rgb(146, 146, 146);
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
    margin-bottom: 60px;
  }

  .foot {
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 70px;
  }

  .foot div {
    width: 50%;
  }

  .foot .his1 {
    border-right: solid 1px rgb(240, 240, 240);
  }

  .light {
    color: rgb(49, 144, 232);
    border-bottom: 3px solid rgb(49, 144, 232);
  }

  .normal {
    color: black;
  }

  .wenhao {
    position: absolute;
    top: 110px;
    right: 110px
  }

  .vonvher {
    position: absolute;
    top: 110px;
    right: 10px;
    font-size: 13px;
    color: rgb(49, 144, 232);
  }

  .img1 {
    position: absolute;
    left: 115px;
    top: 220px;
    width: 150px;
    height: 150px;
  }

  .load {
    position: absolute;
    left: 115px;
    top: 380px;
    height: 30px;
    line-height: 30px;
  }
</style>